<template>
  <!-- <Login />   -->
  <router-view />
  <div
    class="float-button"
    :style="{ right: `${buttonX}px`, bottom: `${buttonY}px` }"
    @mousedown="moveFloatButton"
    
  >
    <!-- @mouseup.prevent="stopMove" -->
    <a-float-button-group
      v-model:open="open"
      trigger="click"
      type="primary"
      :style="{ right: '24px' }"
      @click="handleopen"
    >
      <template #icon>
        <CustomerServiceOutlined />
      </template>
      <a-float-button />
      <a-upload
        v-model:file-list="fileList"
        name="file"
        maxCount="1"
        :customRequest="customUpload"
        @change="handleChange"
      >
        <a-float-button>
          <template #icon>
            <PictureOutlined />
          </template>
        </a-float-button>
      </a-upload>
    </a-float-button-group>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import {
  CustomerServiceOutlined,
  PictureOutlined,
} from "@ant-design/icons-vue";
import { uploadBgApi } from "@/api/upload";
import { getUserInfo, updateBgImg } from "@/api/user";
import { message } from "ant-design-vue";
import useStore from "@/store/index.js";
const { userStore } = useStore();
const open = ref(false);
const fileList = ref([]);
const buttonX = ref(20); // 按钮的初始水平位置
const buttonY = ref(50); // 按钮的初始垂直位置
const isDragging = ref(false); // 是否正在拖拽
const draggableButton = ref(null); // 按钮的 DOM 元素
onMounted(() => {
  // moveFloatButton();
});
const customUpload = async (options) => {
  console.log(options);
  try {
    let result = await uploadBgApi({ file: options.file });
    console.log("result", result);

    if (result.status == 200) {
      let res = await updateBgImg({ id: 1, bgImg: result.data });
      if (res.status == 200) {
        message.success("更换成功");
        getUserInfoFun();
      }
    }
    // let result = await test();
  } catch (error) {
    message.error("更换失败");
  }
};
const getUserInfoFun = async () => {
  try {
    userStore.fetchUserInfo({ id: 1 });
  } catch (error) {}
};

// 移动悬浮按钮
const moveFloatButton = (event) => {
  console.log(event);

  const floatButton = document.getElementsByClassName("float-button")[0];
  console.log("floatButton", floatButton);
  isDragging.value = true;

  // 计算鼠标相对于按钮左上角的偏移量
  const offsetX = event.clientX - floatButton.getBoundingClientRect().left;
  const offsetY = event.clientY - floatButton.getBoundingClientRect().top;
  const originX = event.clientX;
  const originY = event.clientY;
  const originBottom = buttonY.value;
  const originRight = buttonX.value;
  // console.log("event", offsetY, originY, floatButton.getBoundingClientRect());

  // 阻止事件冒泡
  // event.stopPropagation();
  // 监听鼠标移动事件
  const onMouseMove = (event) => {
    if (isDragging.value) {
      // 获取按钮的宽度和高度
      const buttonWidth = floatButton.offsetWidth;
      const buttonHeight = floatButton.offsetHeight;

      // 计算新的按钮位置
      let newX = originRight - (event.clientX - originX) / 2;
      let newY = originBottom - (event.clientY - originY) / 2;
      // console.log(
      //   "event",
      //   event.clientY,
      //   originBottom,
      //   event.clientY - originY,
      //   newY
      // );

      // 定义吸附阈值（例如 10px）
      const snapThreshold = 30;
      open.value = false;
      // 水平边界吸附
      if (newX < snapThreshold) {
        newX = 0; // 吸附到左边界
      } else if (newX > (window.innerWidth - buttonWidth - snapThreshold) / 2) {
        newX = (window.innerWidth - buttonWidth) / 2; // 吸附到右边界
      }

      // 垂直边界吸附
      if (newY < snapThreshold) {
        newY = 0; // 吸附到下边界
      } else if (
        newY >
        (window.innerHeight - buttonHeight - snapThreshold) / 2
      ) {
        newY = (window.innerHeight - buttonHeight) / 2; // 吸附到上边界
        console.log("newY", newY);
      }

      // 更新按钮的位置
      buttonX.value = newX;
      buttonY.value = newY; // 直接使用 newY

      // 实时更新按钮的样式
      floatButton.style.right = `${buttonX.value}px`;
      floatButton.style.bottom = `${buttonY.value}px`; // 从底部定位
    }
  };
  // 监听鼠标松开事件
  const onMouseUp = () => {
    isDragging.value = false;
    // 阻止事件冒泡
    // event.stopPropagation();
    // 检查拖动距离是否小于某个阈值
    const moveThreshold = 100;
    const deltaX = Math.abs(event.clientX - originX);
    const deltaY = Math.abs(event.clientY - originY);
    open.value = false;
    if (deltaX < moveThreshold && deltaY < moveThreshold) {
      // 如果拖动距离很小，触发点击事件
      // floatButton.click();
    }
    // 移除事件监听
    document.removeEventListener("mousemove", onMouseMove);
    document.removeEventListener("mouseup", onMouseUp);
  };

  // 添加事件监听
  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
};
const stopMove = () => {
  // 阻止事件冒泡
  event.stopPropagation();
};
const handleopen = () => {
  console.log("open");
};
</script>
<style>
.float-button {
  width: 40px;
  /* height: 40px; */
  position: fixed;
}
</style>
